@extends('layouts.adminVue')

@section('title', '|imgur')

@section('content')

    <div id="form">
        <div class="row">
            <div class="col-md-6">
                <a class=" btn btn-primary btn-block" @click="previous">
                上一篇
                </a>
            </div>
            <div class="col-md-6">

                <a class="btn btn-primary btn-block" @click="next">
                下一篇
                </a>
            </div>

        </div>
        <h1 class="text-center">@{{title}}</h1>
        <br>
        <label>编辑图片信息</label>
        <input v-model="title_translation" placeholder="标题翻译" class="form-control">
        <div class="well" v-for="img in images">
            <img :src="'http://img.trytv.org/' + img.key" style="width: 100%">
            <label>编辑图片信息</label>
            <textarea v-model="img.description" placeholder="图片翻译" class="form-control"></textarea>
        </div>
        <input type="checkbox" id="checkbox" v-model="is_published">
        <label for="checkbox">@{{ publishString }}</label>

        <button @click='deleteAction' class="btn btn-block btn-warning">@{{deleteString}}</button>
        <button @click='submit' class="btn btn-success btn-block">提交</button>

    </div>
@endsection

@section('scripts')
    <script>
        let vm = new Vue({
            el: '#form',
            data: eval({!! $imgur !!}),

            methods: {
                submit(){
                    let data = this.$data;
                    let that = this
                    axios.post('/imgur/update', data)
                        .then(function (response) {
                            console.log(response);
                            that.$data = response.data;
                            that.next()
                        })
                        .catch(function (error) {
                            console.log(error);
                        });


                },
                deleteAction(){
                    this.deleted_at = "deleted";
                },
                next(){

                    location.href = '/imgur/edit/' + (this.id + 1)

                },
                previous(){
                    location.href = '/imgur/edit/' + (this.id - 1)
                }
            },
            computed: {
                publishString(){
                    return this.is_published ? '已发表' : '编辑中';
                },
                deleteString(){
                    return this.deleted_at ? '已删除' : "是正常";
                }
            }
        })
    </script>
@endsection
